<template lang="">
    <el-form :model="eidtForm">
        <el-form-item label="商品名称">
            <el-input v-model="eidtForm.proname" autocomplete="off" />
        </el-form-item>

        <el-form-item label="商品价格">
            <el-input v-model="eidtForm.originprice" autocomplete="off" />
        </el-form-item>

        <el-form-item label="商品品牌">
            <el-input v-model="eidtForm.brand" autocomplete="off" />
        </el-form-item>

        <el-form-item label="商品库存">
            <el-input v-model="eidtForm.stock" autocomplete="off" />
        </el-form-item>

        <el-form-item label="是否售卖">
            <el-switch v-model="eidtForm.issale" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item label="商品图片">
            <el-upload v-model:file-list="fileList" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :http-request="uploadImgFn" :on-success="uploadImgSuccess">
                <el-icon><Plus /></el-icon>
            </el-upload>

            <el-dialog v-model="previewDialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
        </el-form-item>

        <el-form-item label="详情">
            <el-input v-model="eidtForm.desc" type="textarea" />
        </el-form-item>
    </el-form>
    <el-button type="primary" @click="sendHandler()"> 发布 </el-button>
</template>
<script>
import { add } from "../api/api/list.js";
import { upload } from "../api/api/upload.js";
export default {
    data() {
        return {
            eidtForm: {},
            fileList: [],
            dialogImageUrl: "",
            previewDialogVisible: false,
        };
    },
    methods: {
        sendHandler() {
            //console.log(this.eidtForm);
            //console.log(this.fileList);
            // debugger;

            let banners = this.fileList.map((v) => v.response.data.fileUrl);

            for (let index = 0; index < 4; index++) {
                this.eidtForm["img" + (index + 1)] = "";
            }
            banners.forEach((v, i) => {
                this.eidtForm["img" + (i + 1)] = v;
            });

            add(this.eidtForm).then((r) => {
                //console.log(r.data);

                ElMessage({
                    message: "发布成功",
                    type: "success",
                    plain: true,
                });
                this.eidtForm = {};
            });
        },
        handlePictureCardPreview(fileObj) {
            this.previewDialogVisible = true;
            this.dialogImageUrl = fileObj.url;
        },
        handleRemove(fileObj, fileList) {
            //console.log(fileObj, fileList);
        },
        uploadImgSuccess(r) {
            //console.log(r);
            //console.log(r.data.fileUrl);
            //console.log(this.fileList);
            //console.log(this.fileList);
        },
        uploadImgFn(options) {
            //console.log(options);
            let fd = new FormData();
            fd.append("img", options.file);
            return upload(fd);
        },
    },
};
</script>
<style lang=""></style>
